<template>
  <div
    :class='{ unLockLogin: isShowLogin }'
    class='lockscreen'
    @keyup='unLockLogin(true)'
    @mousedown.stop
    @contextmenu.prevent
  >
    <charge1></charge1>
    <template v-if='!isShowLogin'>
      <div class='local-time'>
        <div class='time'>{{ hour }}:{{ minute }}:{{seconds}}</div>
        <div class='date'>{{ month }}月{{ day }}号，{{ week }}</div>
      </div>
      <div class='computer-status'>
        <span :class='{ offline: !online }' class='network'>
          <WifiOutlined class='network' />
        </span>
        <ApiOutlined />
      </div>
    </template>

  </div>
</template>

<script>
import XiaomiCharge from "@/components/LockScreen/xiaomi-charge"
import Charge1 from "@/components/LockScreen/charge1"

export default {
  name: "LockScreenPage",
  components: { Charge1, XiaomiCharge },
  props: {},
  data() {
    return {
      isShowLogin: false,
      randomCompName: "Charge1",
      batteryStatus: 0,
      calcDischargingTime: 0,
      battery: 100,
      hour: "00",
      minute: "00",
      seconds: "00",
      month: "00",
      day: "00",
      week: "日",
      online: false,
      loginLoading: false, // 正在登录
      loginForm: {
        username: "",
        password: ""
      },
      isLock: false
    }
  },
  watch: {},
  created() {
 
  },
  mounted() {
    this.updateTime();
    setInterval(() => {
      this.updateTime();
    }, 1000);
  },
  methods: {
    updateTime() {
      const date = new Date();
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      const month = (date.getMonth()+1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const week = date.getDay();
      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const weekDayText = weekDays[week];
      this.hour=hours;
      this.minute=minutes;
      this.seconds=seconds;
      this.month=month;
      this.day=day;
      this.week=weekDayText;
    },
    unLockLogin() {

    },
    onLogin() {

    },
    nav2login() {

    }
  }
}


</script>

<style lang='less' scoped>
.lockscreen {
  display: flex;
  position: fixed;
  z-index: 9999;
  inset: 0;
  overflow: hidden;
  background: #000;
  color: white;

  &.unLockLogin {
    background-color: rgb(25 28 34 / 78%);
    backdrop-filter: blur(7px);
  }

  .login-box {
    display: flex;
    position: absolute;
    top: 25%;
    left: 50%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);

    > * {
      margin-bottom: 14px;
    }

    .username {
      font-size: 30px;
    }
  }

  .lock-box {
    position: absolute;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    font-size: 34px;

    .tips {
      color: white;
      cursor: text;
    }

    .lock {
      display: flex;
      justify-content: center;

      .lock-icon {
        cursor: pointer;

        .anticon-unlock {
          display: none;
        }

        &:hover .anticon-unlock {
          display: initial;
        }

        &:hover .anticon-lock {
          display: none;
        }
      }
    }
  }

  .local-time {
    position: absolute;
    bottom: 60px;
    left: 60px;
    font-family: helvetica;

    .time {
      font-size: 70px;
    }

    .date {
      font-size: 40px;
    }
  }

  .computer-status {
    position: absolute;
    right: 60px;
    bottom: 60px;
    font-size: 24px;

    > * {
      margin-left: 14px;
    }

    .network {
      position: relative;

      &.offline::before {
        content: '';
        position: absolute;
        z-index: 10;
        top: 20%;
        left: 50%;
        width: 2px;
        height: 28px;
        transform: translate(-50%, -50%) rotate(45deg);
        background-color: red;
      }
    }
  }
}
</style>
